<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>银行</title>

    <script src="../js/base.min.js"></script>

    <link rel="stylesheet" href="//at.alicdn.com/t/font_1526370_zmvusmgx65b.css">

    <link rel="stylesheet" href="../css/yinhang.css">
</head>
<body>
<header>
    <div flex="main:center cross:center">
        <div class="a">
            <i class="iconfont iconsousuo"></i>
            <input type="text" placeholder="点击输入你想要的内容">
        </div>
        <i class="iconfont iconjiqiren"></i>
    </div>
    <div class="b" flex="main:justify cross:center">
        <div flex="dir:top cross:center">
            <img src="../img/2.png">
            <p class="c">刷卡收款</p>
        </div>
        <div flex="dir:top cross:center">
            <img src="../img/3.png">
            <p class="c">无卡支付</p>
        </div>
        <div flex="dir:top cross:center">
            <img src="../img/4.png">
            <p class="c">附近商圈</p>
        </div>
        <div flex="dir:top cross:center">
            <img src="../img/5.png">
            <p class="c">还信用卡</p>
        </div>
    </div>
</header>
<section class="d">
  <div flex="main:justify">
      <div flex="dir:top cross:center main:center">
          <i class="iconfont iconcoupon"></i>
          <p>优惠券</p>
      </div>
      <div flex="dir:top cross:center main:center">
          <i class="iconfont iconlibao"></i>
          <p>推荐有礼</p>
      </div>
      <div flex="dir:top cross:center main:center">
          <i class="iconfont iconshouye"></i>
          <p>我的商城</p>
      </div>
      <div flex="dir:top cross:center main:center">
          <i class="iconfont iconyouhuiquan3"></i>
          <p>惠买单</p>
      </div>
  </div>
  <div flex="main:justify">
        <div flex="dir:top cross:center main:center">
            <i class="iconfont iconbangdingyinhangqia"></i>
            <p>推荐办卡</p>
        </div>
        <div flex="dir:top cross:center main:center">
            <i class="iconfont iconjinqian"></i>
            <p>金融理财</p>
        </div>
        <div flex="dir:top cross:center main:center">
            <i class="iconfont icongongjijindaikuan"></i>
            <p>极速贷款</p>
        </div>
        <div flex="dir:top cross:center main:center">
            <i class="iconfont iconshuaqiaqiapianyinhangqia"></i>
            <p>行用卡申请</p>
        </div>
  </div>
</section>
<section class="e">
    <img src="../img/7.png">
</section>

<section class="f">
   <div class="i">
       <p class="g">收支明细 </p>
   </div>
    <div class="j"></div>
    <div class="a-b" flex="main:justify">
        <div >
            <b class="k">￥67.8</b>
            <span>万</span>
            <p>本月收款金额</p>
        </div>
        <div>
            <b class="l">￥16.05</b>
            <span class="m">元</span>
            <p>本月支出金额</p>
        </div>
    </div>
    <div class="a-c">
        <button class="a-d">查看详细账单</button>
    </div>
    <div class="a-a">
        <div flex="main:justify">
            <div flex="main:center dir:top">
                <img src="../img/8.png">
                <p>首页</p>
            </div>
            <div flex="main:center dir:top">
                <img src="../img/9.png">
                <p>理财</p>
            </div>
            <div flex="main:center dir:top">
                <img src="../img/10.png">
                <p>消息</p>
            </div>
            <div flex="main:center dir:top">
                <img src="../img/11.png">
                <p>我的</p>
            </div>
        </div>
    </div>
</section>



</body>
</html>